<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<title>日程管理</title>
<script src="${ctx}/static/js/selectWin/calendarTypeSelector.js?version=${applicationScope.jsVersion }" type="text/javascript"></script>
<script src="${ctx}/static/js/selectWin/userSelector.js?version=${applicationScope.jsVersion }" type="text/javascript"></script>
<script type="text/javascript">
	var $grid;
	var $calendarGrid;
	var selectTableRow;//选中的行数据
	$(function() {
		$grid = $("#grid").datagrid($.extend(datagridOption, {
			url : "${ctx}/basic/calendarType/dataGrid",
			columns : [ [ {
				field : 'ck',
				checkbox : true
			}, {
				field : 'createBy',
				title : '用户名',
				width : 80,
				sortable : true
			}, {
				field : 'typeName',
				title : '日程类型',
				width : 120,
				sortable : true
			}, {
				field : 'backgroundColor',
				title : '背景颜色',
				sortable : true,
				width : 120,
				formatter : function(val) {
					return "";
				},
				styler : function(value, row, index) {
					return 'background-color:' + value + ";";
				}
			} ] ],
			onClickRow : function(rowIndex, rowData) {
				selectTableRow = rowData;
				$("#cc").layout("panel", "east").panel({
					title : "日程类型【" + rowData.typeName + "】日程管理"
				});
				clearSelAndChe();
				refresh(rowData);//刷新代码表明细
			}
		}));
		$grid.datagrid('enableFilter', [ {
			field : 'backgroundColor',
			noFilter : true
		} ]);

		$calendarGrid = $("#calendarGrid").datagrid($.extend(datagridOption, {
			toolbar : '#codett',
			fit : true,
			url : "${ctx}/basic/calendarManage/dataGrid",
			columns : [ [ {
				field : 'ck',
				checkbox : true
			}, {
				field : 'createBy',
				title : '用户名',
				width : 80,
				sortable : true
			}, {
				field : 'calendarType',
				title : '日程类型',
				width : 80,
				formatter : function(val) {
					return val ? val.typeName : "";
				},
				sortable : true
			}, {
				field : 'title',
				title : '日程标题',
				width : 100,
				sortable : true
			}, {
				field : 'allDay',
				title : '是否全天',
				width : 80,
				formatter : function(val) {
					return val == 1 ? "是" : "否";
				},
				sortable : true
			}, {
				field : 'start',
				title : '开始时间',
				width : 120,
				sortable : true
			}, {
				field : 'end',
				title : '结束时间',
				width : 120,
				sortable : true
			} ] ],
			onClickRow : function(rowIndex, rowData) {

			}
		}));
		showSearch();
		$("#calendarType").comboselector(calendarTypeSelectOpts);
		$("#user").comboselector($.extend(userSelectOpts, {
			multiple : true
		}));
		$("#add").click(function() {
			$("#fm").form("clear");
			$("#dlg").dialog("open").dialog("setTitle", "新增日程类型");
		});
		$("#btn-add").click(
				function() {
					if (!selectTableRow) {
						$.messager.show({
							icon : "error",
							msg : "请先选中日程类型中的行"
						});
						return false;
					}
					$("#calendarfm").form("clear");
					$('#calendarfm').form('load', {
						allDay : 1
					});
					$("#calendarType").comboselector("setValue", selectTableRow.id).comboselector("setText", selectTableRow.typeName)
							.comboselector("readonly", false);
					$("#calendardlg").dialog("open").dialog("setTitle", "新增日程");
				});
		$("#edit").click(function() {
			var rowData = $grid.datagrid("getSelected");
			if (rowData == null) {
				$.messager.show({
					msg : "您未选中行，无法编辑",
					icon : "warning",
					position : "bottomRight"
				});
			} else {
				$("#dlg").dialog("open").dialog("setTitle", "编辑日程类型");
				$("#fm").form("load", rowData);
			}
		});
		$("#btn-edit").click(
				function() {
					var rowData = $calendarGrid.datagrid("getSelected");
					if (rowData == null) {
						$.messager.show({
							msg : "您未选中行，无法编辑",
							icon : "warning",
							position : "bottomRight"
						});
					} else {
						$("#calendarfm").form("load", $.extend(rowData, {
							allDay : rowData.allDay ? 1 : 2
						}));
						$("#calendarType").comboselector("setValue", rowData.calendarType.id).comboselector("setText",
								rowData.calendarType.typeName).comboselector("readonly", true);
						$("#calendardlg").dialog("open").dialog("setTitle", "编辑日程");
					}
				});
		$("#delete").click(function() {
			multiDeleteDataGrid($grid, "${ctx}/basic/calendarType/multiDelete");
		});
		$("#btn-delete").click(function() {
			multiDeleteDataGrid($calendarGrid, "${ctx}/basic/calendarManage/multiDelete");
		});

		$("#btn-search").click(function() {
			clearSelAndChe();
			$calendarGrid.datagrid({
				url : "${ctx}/basic/calendarManage/dataGrid?isSys=true&search_IN_user.id=" + $("#user").comboselector("getValue")
			});
			showSearch();
		});
		$("#searchALL").click(function() {
			clearSelAndChe();
			$calendarGrid.datagrid({
				url : "${ctx}/basic/calendarManage/dataGrid?isAll=true"
			});
			showSearch();
		});
		$("#btn-searchALL").click(function() {
			clearSelAndChe();
			$calendarGrid.datagrid({
				url : "${ctx}/basic/calendarManage/dataGrid?isSys=true"
			});
			showSearch();
		});
	});
	function fn_save() {
		$("#fm").form("submit", {
			url : "${ctx}/basic/calendarType/update",
			success : function(data) {
				if (data.success) {
					$("#dlg").dialog("close");
					$("#grid").datagrid("load");
				}
				showInfo(data.msg);
			}
		});
	}
	function fun_calendar_save() {
		$("#calendarfm").form("submit", {
			url : "${ctx}/basic/calendarManage/newUpdate",
			success : function(data) {
				if (data.success) {
					$("#calendardlg").dialog("close");
					$("#calendarGrid").datagrid("load");
				}
				showInfo(data.msg);
			}
		});
	}

	//刷新values列表
	function refresh(rowData) {
		if (!rowData) {
			showAlert("请先选择中类信息");
			return false;
		} else {
			$calendarGrid.datagrid({
				url : "${ctx}/basic/calendarManage/dataGrid?search_EQ_calendarType.id=" + rowData.id,
			});
			showSearch();
		}

	}
	function showSearch() {
		$calendarGrid.datagrid('enableFilter', [ {
			field : 'start',
			noFilter : true
		}, {
			field : 'end',
			noFilter : true
		}, {
			field : 'allDay',
			type : 'combobox',
			javaType : 'I',
			options : {
				panelHeight : 'auto',
				data : [ {
					value : '',
					text : '全部'
				}, {
					value : '1',
					text : '是'
				}, {
					value : '2',
					text : '否'
				} ],
				onChange : function(value) {
					if (value == '') {
						$("#calendarGrid").datagrid('removeFilterRule', 'allDay');
					} else {
						$("#calendarGrid").datagrid('addFilterRule', {
							field : 'allDay',
							op : 'EQ',
							value : value
						});
					}
					$("#calendarGrid").datagrid('doFilter');
				}
			}
		} ]);
	}
	function clearSelAndChe() {
		if ($calendarGrid.datagrid("getRows")) {
			$calendarGrid.datagrid("clearSelections").datagrid("clearChecked");//清除所有选中的行，解决始终保留代码值中上次选中行bug
		}
	}
</script>
</head>

<body>
	<div data-options="region:'center'" data-options="fit:true" style="padding: 1px;">
		<div id="cc" class="easyui-layout" data-options="fit:true" style="width: 645px; height: 440px;">
			<div data-options="region:'center'" style="padding: 1px; witdh: 400px">
				<table id="grid">
				</table>
				<div id="tt">
					<span class="dialog-tool-separator"></span> <a id="add" class="easyui-linkbutton easyui-tooltip"
						data-options="plain: true, iconCls: 'icon-standard-add',content:'新增'">新增</a> <a id="edit" class="easyui-linkbutton easyui-tooltip"
						data-options="plain: true, iconCls: 'icon-hamburg-pencil',content:'编辑'">编辑</a> <a id="delete" class="easyui-linkbutton easyui-tooltip"
						data-options="plain: true, iconCls: 'icon-hamburg-busy',content:'删除'">删除</a> <a id="searchALL" href="#" class="easyui-linkbutton"
						data-options="iconCls:'icon-hamburg-zoom',plain: true">查看全部</a>
				</div>
				<div id="dlg" class="easyui-dialog" style="width: 320px; height: 240px; padding: 10px 20px"
					data-options="iconCls:'icon-save',resizable:true,modal:true, 
			buttons:[
                    { text: '保存', iconCls: 'icon-ok', handler: function () { fn_save(); } },
                    { text: '取消', iconCls:'icon-cancel', handler: function () { $('#dlg').dialog('close'); } }
                ],closed:true">
					<form id="fm" method="post">
						<input type="hidden" name="id" />
						<table id="tbl">
							<tr>
								<td><label>日程类型名称:</label></td>
								<td><input id="typeName" name="typeName" class="easyui-validatebox" data-options="required:true" /></td>
							</tr>
							<tr>
								<td><label>背景颜色:</label></td>
								<td><input id="backgroundColor" name='backgroundColor' type="color" style="width: 170px" data-options="required:true" /></td>
							</tr>
						</table>
					</form>
				</div>
			</div>
			<div data-options="region:'east', title:'日程', split: true, collapsible:true" style="padding: 1px; witdh: 800px">
				<table id="calendarGrid">
				</table>
				<div id="codett" class="easyui-toolbar">
					<c:if test="${isSystem==1 }">
						<div>
							<span>用户名： </span> <input id="user" name="search_IN_user.id" class="easyui-validatebox" style="width: 120px" /> <a id="btn-search"
								href="#" class="easyui-linkbutton" data-options="iconCls:'icon-hamburg-zoom',plain: true">查询</a>

						</div>
					</c:if>
					<div>
						<a id="btn-add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain: true">新增日程</a> <a id="btn-edit" href="#"
							class="easyui-linkbutton" data-options="iconCls:'icon-hamburg-pencil',plain: true">修改</a> <a id="btn-delete" href="#"
							class="easyui-linkbutton" data-options="iconCls:'icon-hamburg-busy',plain: true">删除选中</a>
						<c:if test="${isSystem==1 }">
							<a id="btn-searchALL" href="#" class="easyui-linkbutton  easyui-tooltip"
								data-options="iconCls:'icon-hamburg-zoom',plain: true,content:'查看所有人的日程安排'">查看全部</a>
						</c:if>
					</div>
				</div>
				<div id="calendardlg" class="easyui-dialog" style="width: 400px; height: 280px; padding: 10px 20px"
					data-options="iconCls:'icon-save',resizable:true,modal:true, 
			buttons:[
                    { text: '保存', iconCls: 'icon-ok', handler: function () { fun_calendar_save(); } },
                    { text: '取消', iconCls:'icon-cancel', handler: function () { $('#calendardlg').dialog('close'); } }
                ],closed:true">
					<form id="calendarfm" method="post">
						<input type="hidden" name="id" />
						<table>
							<tr>
								<td><label>日程类型:</label></td>
								<td><input id="calendarType" name="calendarType" data-options="required:true" /></td>
							</tr>
							<tr>
								<td><label>日程标题:</label></td>
								<td><input id="title" name="title" class="easyui-validatebox" data-options="required:true" /></td>
							</tr>
							<tr>
								<td><label>开始时间:</label></td>
								<td><input name="start" class="easyui-my97" datefmt="yyyy-MM-dd HH:mm" data-options="required:true" /></td>
							</tr>
							<tr>
								<td><label>结束时间:</label></td>
								<td><input name="end" class="easyui-my97" datefmt="yyyy-MM-dd HH:mm" data-options="required:true" /></td>
							</tr>
							<tr>
								<td><label>是否全天:</label></td>
								<td><input id="radio1" name="allDay" type="radio" value="1" /><label for="radio1">是</label> <input id="radio2" name="allDay"
									type="radio" value="2" /><label for="radio2">否</label></td>
							</tr>
						</table>
					</form>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
